import {
  Button,
  Descriptions,
  DescriptionsItem,
  Form,
  FormItem,
  Image,
  Modal,
  Space,
  Spin,
  Step,
  Steps
} from 'ant-design-vue'
import moment from 'moment'
import { defineComponent, ref } from 'vue'
import { useRoute } from 'vue-router'

import { JindouLifeExpressInfo } from '@/apis/jindouLifeTyps'
import qzyApi from '@/apis/qzyApi'
import { qzyOrderItem } from '@/apis/qzyType'
import { ProTable, ProTableProps, ProTableRef } from '@/components'
import { TABLE_FORMAT, TABLE_ITEM_RENDER, TABLE_RENDERER } from '@/constants'
import { useBack } from '@/hooks'
import { formatDate, optionsToMap } from '@/utils'

export default defineComponent({
  name: 'QzyOrderDetail',
  setup() {
    const loading = ref(false)
    const route = useRoute()
    const showExpressDlg = ref(false)
    const wlData = ref({} as any)
    const statusOptions = [
      { label: '待推送erp', value: 0 },
      { label: '待发货', value: 1 },
      { label: '待收货', value: 2 },
      { label: '已完成', value: 3 }
    ]
    const expressInfo = ref({} as qzyOrderItem)
    const statusMap = optionsToMap(statusOptions)
    const tableRef = ref({} as ProTableRef)
    const tableConfig = ref({
      fixedHeight: false,
      options: {
        border: true,
        align: 'center',
        columns: [
          {
            title: '商品图片',
            slots: {
              default: 'image'
            }
          },
          {
            title: '商品名称',
            field: 'goodsName'
          },

          {
            title: '订单状态',
            field: 'orderStatus',
            formatter: ({ cellValue }) => {
              return statusMap[cellValue]
            }
          },
          {
            title: '发货时间',
            field: 'orderTime',
            formatter: TABLE_FORMAT.Date
          },
          {
            title: '操作',
            slots: {
              default: 'operation'
            }
          }
        ],
        proxyConfig: {
          form: true,

          ajax: {
            query: async () => {
              const data = [expressInfo.value]
              return data
            }
          }
        }
      }
    } as ProTableProps)

    //获取订单详情
    async function getOrderDetail() {
      loading.value = true
      try {
        expressInfo.value = await qzyApi.qzyOrderlDetail(route.query.orderNo)
        tableRef.value.refresh()
      } finally {
        loading.value = false
      }
    }
    async function checkWl() {
      showExpressDlg.value = true
      try {
        wlData.value = await qzyApi.getLogisticsDetails({
          orderNo: route.query.orderNo
        })
      } finally {
      }
    }
    getOrderDetail()
    return {
      tableRef,
      tableConfig,
      showExpressDlg,
      wlData,
      expressInfo,
      loading,
      checkWl,
      getOrderDetail,
      statusMap
    }
  },
  render() {
    return (
      <Spin spinning={this.loading}>
        <ProTable
          data={this.expressInfo}
          ref="tableRef"
          v-slots={{
            image: ({ row }) => (
              <Image
                src={row.prizeUrl}
                style={{ width: '80px', height: '80px' }}
              ></Image>
            ),
            operation: ({ rowIndex }) => (
              <Space>
                <Button type="link" size="small" onClick={this.checkWl}>
                  查看物流
                </Button>
              </Space>
            )
          }}
          {...this.tableConfig}
        />
        <Descriptions
          title="下单信息"
          style={{
            marginTop: '40px',
            marginRight: '200px',
            marginLeft: '15px'
          }}
        >
          <DescriptionsItem label="购买人姓名">
            {this.expressInfo.memberNick}
          </DescriptionsItem>
          <DescriptionsItem label="手机号">
            {this.expressInfo.receiverMobile}
          </DescriptionsItem>
          <DescriptionsItem label="订单状态">
            {this.statusMap[this.expressInfo.orderStatus]}
          </DescriptionsItem>
          <DescriptionsItem label="兑换时间">
            {formatDate(this.expressInfo.orderTime)}
          </DescriptionsItem>
        </Descriptions>
        <Descriptions
          title="收货人信息"
          style={{
            marginRight: '200px',
            marginLeft: '15px',
            marginTop: '30px'
          }}
        >
          <DescriptionsItem label="收货人姓名">
            {this.expressInfo.receiverName}
          </DescriptionsItem>
          <DescriptionsItem label="手机号">
            {' '}
            {this.expressInfo.receiverMobile}
          </DescriptionsItem>
          <DescriptionsItem label="地址">
            {this.expressInfo.receiverProvince +
              this.expressInfo.receiverCity +
              this.expressInfo.receiverDistrict +
              this.expressInfo.receiverAddress}
          </DescriptionsItem>
        </Descriptions>
        <FormItem
          style={{
            marginLeft: '600px',
            marginTop: '200px',
            marginBottom: '60px'
          }}
        ></FormItem>
        <Modal
          v-model:visible={this.showExpressDlg}
          title="物流信息"
          width={700}
          footer={null}
        >
          <Form>
            <FormItem label="物流公司">{this.wlData.expressName}</FormItem>
            <FormItem label="物流单号">{this.wlData.logisticNo}</FormItem>
            <FormItem>
              <Steps direction="vertical" current={50}>
                {this.wlData.traces?.map(item => {
                  return (
                    <Step
                      title={item.acceptTime}
                      description={item.acceptStation}
                    />
                  )
                })}
              </Steps>
            </FormItem>
          </Form>
        </Modal>
      </Spin>
    )
  }
})
